<template>
  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
    <transition name="sidebarLogoFade">
      <router-link
        v-if="collapse"
        key="collapse"
        class="sidebar-logo-link"
        to="/"
      >
        <!-- 收起状态：只显示图标 -->
        <i class="fas fa-cube sidebar-logo-icon"></i>
      </router-link>
      <router-link
        v-else
        key="expand"
        class="sidebar-logo-link"
        to="/"
      >
        <!-- 展开状态：图标 + 文字 - 完全匹配原型 -->
        <i class="fas fa-cube sidebar-logo-icon"></i>
        <span class="sidebar-title">{{ title }}</span>
      </router-link>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'

interface Props {
  collapse: boolean
}

defineProps<Props>()

const appStore = useAppStore()

// 计算属性 - 匹配原型页面
const title = computed(() => appStore.systemTitle || 'Kexio')  // 默认使用 Kexio
</script>

<style lang="scss" scoped></style>
